<template>
  <div class="index-container">
    <el-form ref="formRef" label-width="80px" :model="baseForm">
      <el-row>
        <el-col :span="24">
          <el-form-item label="来源" prop="sourcefrom">
            <el-radio-group v-model="baseForm.sourcefrom">
              <el-radio
                v-for="(item, index) in sourcefromArr"
                :key="index"
                :value="item.value"
              >
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="称呼" prop="username">
            <el-input v-model="baseForm.username" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="手机" prop="mobile">
            <el-input v-model="baseForm.mobile" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="微信" prop="weixin">
            <el-input v-model="baseForm.weixin" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="性别" prop="gander">
            <el-radio-group v-model="baseForm.gender">
              <el-radio
                v-for="(item, index) in genderArr"
                :key="index"
                :value="item.value"
              >
                {{ item.label }}
              </el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="姓名" prop="realname">
            <el-input v-model="baseForm.realname" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="生日" prop="birthday">
            <el-date-picker
              v-model="baseForm.birthday"
              type="date"
              format="YYYY-MM-DD"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身高" prop="height">
            <el-input v-model="baseForm.height">
              <template #append>cm</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="体重" prop="weight">
            <el-input v-model="baseForm.weight">
              <template #append>kg</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="婚况" prop="marry">
            <el-select v-model="baseForm.marry" placeholder="客户婚况">
              <el-option
                v-for="item in marryArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="学历" prop="education">
            <el-select v-model="baseForm.education" placeholder="客户学历">
              <el-option
                v-for="item in educationArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="职业" prop="job">
            <el-select v-model="baseForm.job" placeholder="客户职业">
              <el-option
                v-for="item in jobArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收入" prop="salary">
            <el-select v-model="baseForm.salary" placeholder="客户收入">
              <el-option
                v-for="item in salaryArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="民族" prop="national">
            <el-select v-model="baseForm.national" placeholder="客户民族">
              <el-option
                v-for="item in nationalArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="现居地">
            <el-cascader
              ref="cascaderone"
              v-model="areaOneArr"
              :options="areaOptions"
              :props="{ label: 'name', value: 'code' }"
              style="width: 100%"
              @change="handleChangeOne"
            />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="户籍地">
            <el-cascader
              ref="cascadertwo"
              v-model="areaTwoArr"
              :options="areaOptions"
              :props="{ label: 'name', value: 'code' }"
              style="width: 100%"
              @change="handleChangeTwo"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="购房" prop="house">
            <el-select v-model="baseForm.house" placeholder="购房情况">
              <el-option
                v-for="item in houseArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="购车" prop="car">
            <el-select v-model="baseForm.car" placeholder="购车情况">
              <el-option
                v-for="item in carArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="月花费" prop="spend">
            <el-select v-model="baseForm.spend" placeholder="月花费情况">
              <el-option
                v-for="item in spendArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="吸烟" prop="smoking">
            <el-select v-model="baseForm.smoking" placeholder="吸烟情况">
              <el-option
                v-for="item in smokingArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="喝酒" prop="drinking">
            <el-select v-model="baseForm.drinking" placeholder="喝酒情况">
              <el-option
                v-for="item in drinkingArr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="baseForm.remark" type="textarea" :rows="4" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div class="pay-button-group">
            <el-button type="primary" @click="submitForm('formRef')">
              保存
            </el-button>
            <el-button @click="resetForm('formRef')">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import { doUpdate } from '@/api/custom'
  import { getAreaList } from '@/api/area'
  export default defineComponent({
    name: 'BaseData',
    props: {
      baseInfoProp: {
        type: Object,
        required: true,
      },
      areaOptions: {
        type: Array,
        required: true,
      },
    },
    emits: ['get-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')
      const state = reactive({
        cascaderone: '',
        cascadertwo: '',
        baseForm: {},
        formRef: {},
        sourcefromArr: [],
        genderArr: [],
        marryArr: [],
        educationArr: [],
        jobArr: [],
        salaryArr: [],
        nationalArr: [],
        houseArr: [],
        carArr: [],
        spendArr: [],
        smokingArr: [],
        drinkingArr: [],
        areaOneArr: [],
        areaTwoArr: [],
        areaOptions: props.areaOptions,
      })
      watchEffect(() => {
        const row = props.baseInfoProp
        state.baseForm.id = row.id
        state.baseForm.sourcefrom = row.sourcefrom
        state.baseForm.username = row.username
        state.baseForm.mobile = row.mobile
        state.baseForm.weixin = row.weixin
        state.baseForm.gender = row.gender
        state.baseForm.realname = row.realname
        state.baseForm.birthday = row.birthday
        state.baseForm.height = row.height
        state.baseForm.weight = row.weight
        state.baseForm.marry = row.marry
        state.baseForm.education = row.education
        state.baseForm.job = row.job
        state.baseForm.salary = row.salary
        state.baseForm.national = row.national
        state.baseForm.province = row.province
        state.baseForm.province_name = row.province_name
        state.baseForm.city = row.city
        state.baseForm.city_name = row.city_name
        state.baseForm.area = row.area
        state.baseForm.area_name = row.area_name
        state.baseForm.reside_province = row.reside_province
        state.baseForm.reside_province_name = row.reside_province_name
        state.baseForm.reside_city = row.reside_city
        state.baseForm.reside_city_name = row.reside_city_name
        state.baseForm.reside_area = row.reside_area
        state.baseForm.reside_area_name = row.reside_area_name
        state.areaOneArr = [
          row.province ? row.province.toString() : '',
          row.city ? row.city.toString() : '',
          row.area ? row.area.toString() : '',
        ]
        // state.areaOneArr.push(row.city.toString())
        // state.areaOneArr.push(row.area.toString())
        state.areaTwoArr = [
          row.reside_province ? row.reside_province.toString() : '',
          row.reside_city ? row.reside_city.toString() : '',
          row.reside_area ? row.reside_area.toString() : '',
        ]
        // state.areaTwoArr.push(row.reside_city.toString())
        // state.areaTwoArr.push(row.reside_area.toString())
        state.baseForm.house = row.house
        state.baseForm.car = row.car
        state.baseForm.spend = row.spend
        state.baseForm.smoking = row.smoking
        state.baseForm.drinking = row.drinking
        state.baseForm.remark = row.remark
      })
      const areaOptions = ref([])

      const areaData = async () => {
        const data = await getAreaList()
        areaOptions.value.push(...data.data)
      }

      const handleChangeOne = () => {
        const labArr = state.cascaderone.getCheckedNodes()[0].pathLabels
        const valArr = state.cascaderone.getCheckedNodes()[0].pathValues
        state.baseForm.province = valArr[0]
        state.baseForm.province_name = labArr[0]
        state.baseForm.city = valArr[1]
        state.baseForm.city_name = labArr[1]
        state.baseForm.area = valArr[2]
        state.baseForm.area_name = labArr[2]
      }

      const handleChangeTwo = () => {
        const labArr = state.cascadertwo.getCheckedNodes()[0].pathLabels
        const valArr = state.cascadertwo.getCheckedNodes()[0].pathValues
        state.baseForm.reside_province = valArr[0]
        state.baseForm.reside_province_name = labArr[0]
        state.baseForm.reside_city = valArr[1]
        state.baseForm.reside_city_name = labArr[1]
        state.baseForm.reside_area = valArr[2]
        state.baseForm.reside_area_name = labArr[2]
      }

      onMounted(() => {
        const params = localStorage.getItem('params')
        const jsonParams = JSON.parse(params)
        state.sourcefromArr = Object.values(jsonParams.sourcefrom)
        state.genderArr = Object.values(jsonParams.gender)
        state.marryArr = Object.values(jsonParams.marry)
        state.educationArr = Object.values(jsonParams.education)
        state.jobArr = Object.values(jsonParams.job)
        state.salaryArr = Object.values(jsonParams.salary)
        state.nationalArr = Object.values(jsonParams.national)
        state.carArr = Object.values(jsonParams.car)
        state.houseArr = Object.values(jsonParams.house)
        state.spendArr = Object.values(jsonParams.spend)
        state.smokingArr = Object.values(jsonParams.smoking)
        state.drinkingArr = Object.values(jsonParams.drinking)
      })
      const submitForm = (formName) => {
        state[formName].validate(async (valid) => {
          if (valid) {
            const { msg } = await doUpdate(state.baseForm)
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            emit('get-data', state.baseForm.id)
          }
        })
      }
      const resetForm = (formName) => {
        state[formName].resetFields()
      }

      return {
        ...toRefs(state),
        handleChangeOne,
        handleChangeTwo,
        areaData,
        submitForm,
        resetForm,
      }
    },
  })
</script>
<style lang="scss" scoped>
  .pay-button-group {
    display: block;
    margin: 20px auto;
    text-align: center;
  }
</style>
